<!DOCTYPE html>
<html>
<head>
    <title>登录界面</title>
    <link rel="stylesheet" href="/layui-v2.6.8/layui/css/layui.css">
    <script src="/js/jquery-3.7.1.js" type="text/javascript" charset="UTF-8"></script>
    <meta charset="UTF-8">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-image: url("https://img.17sucai.com/upload/55/2013-05-18/75fa39f30ba529e3b163ec086bedf18f.png?x-oss-process=style/big");
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
        }

        .layui-input-block img {
            float: right; /* 将图片浮动到输入框右边 */
            margin-left: 10px; /* 添加一些间距 */
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md4 layui-col-md-offset4">
            <div class="layui-card">
                <div class="layui-card-header"><h2>Login</h2></div>
                <div class="layui-card-body">
                    <form class="layui-form" action="login" method="post" id="login">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input type="text" id="username" name="username" required lay-verify="required"
                                       placeholder="请输入账号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input type="password" id="password" name="encryptedPassword" required
                                       lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <button class="layui-btn" style="display: flex; justify-content: center; align-items: center;" lay-submit lay-filter="loginFilter">登录</button>
                        </div>
                        <div class="layui-form-item">
                            <button id="zhuce" class="layui-btn" style="display: flex; justify-content: center; align-items: center;" lay-submit lay-filter="loginFilter">注册</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/layui-v2.6.8/layui/layui.js"></script>
<script>
    document.getElementById("zhuce").addEventListener("click", function (){
        window.location.href = "registerMain";
    });
    $(".layui-btn").click(function () {
        var username = $("#username").val();
        if (isEmpty(username)) {
            $("#username").html("账号不能为空");
            return;
        }
        var password = $("#password").val();
        if (isEmpty(password)) {
            $("#password").html("密码不能为空");
            return;
        }
        //不为空的情况下，提交表单
        $("#login").submit();
    });

    function isEmpty(str) {
        if (str == null || str.trim() == "") {
            return true;
        }
        return false;
    }


</script>
</body>
</html>